<template>
  <a-layout hasSider>
    <a-layout-sider theme='light' width="300px">
      <div class="swagger-sider">
        <Operation />
        <a-form-item label="服务选择" style="margin: 10px 0;">
          <a-select style="width:100%" show-search :show-arrow="false" :filter-option="filterOption"
            @change="changeApiDocs" placeholder="请选择或搜索一个服务" v-model:value="apiDocUrl">
            <a-select-option v-for="s in specList" :key="s.name" :value="s.url">{{ s.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-input placeholder="请输入要搜索的模块名称" v-model:value="moduleName"></a-input>
        <div class="api-tag-list">
          <a-menu mode="inline" v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" style="height: 100%">
            <a-menu-item :key="tag.name" v-for="(tag, index) in docsObjTags" @click="handleTag(tag.name)">
              <div :title="`${tag.name}-${tag.description}`">
                {{
                  `${tag.name}-${tag.description}`
                }}
              </div>
            </a-menu-item>
          </a-menu>
        </div>
      </div>
    </a-layout-sider>
    <a-layout-content style="max-height: 100vh;overflow: auto;padding-top: 10px;">
      <pathContent :urls="currentUrls" :definitions="docsObj.definitions" />
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import { apiDocUrl, getway } from "@/settings/local";
import { useSessionStorage } from "@vueuse/core";
import { computed, defineComponent, onMounted, ref, unref, watch } from "vue";
import { getDocs, useGetWayChange, useSpecList } from "../../api/sw";
import { getPathsV2_0 } from "../../utils/swigger";
import pathContent from "./components/pathContent.vue";
import docsObj from "./hooks/docsObj";
import Operation from "@/components/Operation/Index.vue"

function useUrlDocs() {
  const currentUrls = useSessionStorage("_current_urls", {}); // 当前选择得服务链接
  //切换路由
  function changeApiDocs(url: string) {
    if (!url) return;
    getDocs(url).then((res) => {
      Object.assign(unref(docsObj), res);
    });
  }

  function handleTag(tag: string) {
    currentUrls.value = getPathsV2_0(tag, unref(docsObj).paths); // 获取模块列表
  }

  onMounted(() => changeApiDocs(unref(apiDocUrl)));

  // 更新getway触发页面更新
  watch(getway, () => {
    changeApiDocs(unref(apiDocUrl))
  })

  return { changeApiDocs, docsObj, handleTag, currentUrls };
}

export default defineComponent({
  components: {
    pathContent,
    Operation,
  },
  setup() {
    const moduleName = ref(""); //模块名称
    const { specList, reloadSpecList } = useSpecList();

    const { changeApiDocs, docsObj, handleTag, currentUrls } = useUrlDocs();

    const filterOption = (input: string, option: any) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    const docsObjTags = computed(() => {
      if (!unref(moduleName)) return unref(docsObj).tags;
      return unref(docsObj).tags.filter((tag: AnyObject) => {
        const { description, name } = tag;

        return (
          description.toLowerCase().indexOf(unref(moduleName).toLowerCase()) > -1 ||
          name.indexOf(unref(moduleName)) > -1
        );
      });
    });

    // 监听网关被修改
    useGetWayChange(() => {
      reloadSpecList({})
      currentUrls.value = {}
      apiDocUrl.value = ""
    })

    return {
      selectedKeys2: useSessionStorage("selectedKeys2", ["1"]),
      openKeys: ref<string[]>(["sub1"]),
      specList,
      apiDocUrl,
      changeApiDocs,
      docsObj,
      handleTag,
      currentUrls,
      filterOption,
      docsObjTags,
      moduleName,
    };
  },
});
</script>
<style lang="less" scoped>
.swagger-sider {
  padding: 10px;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .api-tag-list {
    flex: 1;
    height: 0;
    overflow: auto;
  }
}
</style>